<template>
  <view class="container">
    <image class="bg" src="/static/images/bg.png" mode="widthFix"></image>
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      title="库存管理"
    ></u-navbar>
    <view class="content">
      <view class="dataBox">
        <image
          class="dataBox-bg"
          src="/static/images/icon-kcgl.png"
          mode="widthFix"
        ></image>
        <view class="dataBox-content">
          <view class="header">
            <view class="value">12245</view>
            <view class="label">总库存(台)</view>
          </view>
          <view class="bottom">
            <view class="item text-align-left">
              <view class="value">12</view>
              <view class="label">今日激活(台)</view>
            </view>
            <view class="item text-align-center">
              <view class="value">24</view>
              <view class="label">本月激活(台)</view>
            </view>
            <view class="item text-align-right">
              <view class="value" style="text-align: right">2445</view>
              <view class="label">本年激活(台)</view>
            </view>
          </view>
        </view>
      </view>

      <view class="list">
        <view class="item">
          <image class="img" src="/static/images/icon-zdzt.png" mode="widthFix" @click="navigateTo('/pages/home/endPointState')"></image>
          <view class="label">终端状态</view>
        </view>
        <view class="item">
          <image class="img" src="/static/images/icon-zdhb.png" mode="widthFix" @click="navigateTo('/pages/home/endPointTransfer')"></image>
          <view class="label">终端划拨</view>
        </view>
        <view class="item">
          <image class="img" src="/static/images/icon-kccx.png" mode="widthFix" @click="navigateTo('/pages/home/endPointState')"></image>
          <view class="label">库存查询</view>
        </view>
        <view class="item">
          <image class="img" src="/static/images/icon-czsp.png" mode="widthFix" @click="navigateTo('/pages/home/videoOperation')"></image>
          <view class="label">操作视频</view>
        </view>
      </view>

      <view class="list1">
        <view class="item">
          <view class="header">
            <image
              class="avatar"
              src="/static/images/icon-tdtf.png"
              mode="widthFix"
            ></image>
            <view class="info">
              <view class="name">团队投放的终端(台)</view>
              <view class="num">87121</view>
            </view>
          </view>
          <view class="dataShow">
            <view class="data">
              <view class="value">9443</view>
              <view class="label">未绑定</view>
            </view>
            <view class="data">
              <view class="value">8712</view>
              <view class="label">未激活</view>
            </view>
            <view class="data">
              <view class="value">56</view>
              <view class="label">已激活</view>
            </view>
            <view class="data">
              <view class="value">841</view>
              <view class="label">已达标</view>
            </view>
          </view>
        </view>

        <view class="item">
          <view class="header">
            <image
              class="avatar"
              src="/static/images/icon-wtf.png"
              mode="widthFix"
            ></image>
            <view class="info">
              <view class="name">我投放的终端(台)</view>
              <view class="num">87121</view>
            </view>
          </view>
          <view class="dataShow">
            <view class="data">
              <view class="value">9443</view>
              <view class="label">未绑定</view>
            </view>
            <view class="data">
              <view class="value">8712</view>
              <view class="label">未激活</view>
            </view>
            <view class="data">
              <view class="value">56</view>
              <view class="label">已激活</view>
            </view>
            <view class="data">
              <view class="value">841</view>
              <view class="label">已达标</view>
            </view>
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-in">
          <view class="title">
            <view class="title-in"
              ><text>我的机具</text>
              <image
                class="title-sign"
                src="/static/images/icon-tzgg.png"
                mode="widthFix"
              ></image
            ></view>
          </view>
          <view class="detail">
            <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-in">
          <view class="title">
            <view class="title-in"
              ><text>近15日团队数据统计</text>
              <image
                class="title-sign"
                src="/static/images/icon-tzgg.png"
                mode="widthFix"
              ></image
            ></view>
          </view>
          <view class="detail">
            <u-table border-color='transparent'>
              <u-tr>
                <u-th width="25%">直营伙伴</u-th>
                <u-th>总库存</u-th>
                <u-th>未绑定</u-th>
                <u-th>已激活</u-th>
                <u-th>已达标</u-th>
              </u-tr>
              <u-tr>
                <u-td width="25%">张三三</u-td>
                <u-td>0</u-td>
                <u-td>22</u-td>
                <u-td>22</u-td>
                <u-td>22</u-td>
              </u-tr>
              <u-tr>
                <u-td width="25%">耶格尔·张三</u-td>
                <u-td>0</u-td>
                <u-td>22</u-td>
                <u-td>22</u-td>
                <u-td>22</u-td>
              </u-tr>
            </u-table>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {
        series: [
          {
            data: [
              { name: '未绑定', value: 24668, labelShow: false },
              { name: '未激活', value: 24, labelShow: false },
              { name: '已激活', value: 467, labelShow: false },
              { name: '已达标', value: 777, labelShow: false },
            ],
          },
        ],
      },
      opts: {
        rotate: false,
        rotateLock: false,
        color: ['#6D5ACB', '#FA6161', '#3388FF', '#FFBB33'],
        padding: [5, 5, 5, 5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: 'right',
          lineHeight: 25,
        },
        title: {
          name: '24668',
          fontSize: 16,
          color: '#333333',
        },
        subtitle: {
          name: '总台数',
          fontSize: 14,
          color: '#999999',
        },
        extra: {
          ring: {
            ringWidth: 20,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
          },
        },
      },
    };
  },
  onLoad() {},
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  padding: 30rpx;
  text-align: center;
  background-color: #f5f5f5;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

.content {
  width: 100%;
  background-color: transparent;
  overflow: hidden;
  .dataBox {
    position: relative;
    margin-top: 30rpx;
    width: 100%;
    .dataBox-bg {
      width: 100%;
      height: auto;
    }
    .dataBox-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 70rpx 30rpx 50rpx;
      line-height: 1;
      .header {
        width: 100%;
        .value {
          font-family: DIN, sans-serif;
          font-weight: bold;
          font-size: 48rpx;
          color: #ffeacc;
          text-align: left;
        }
        .label {
          margin-top: 10rpx;
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 24rpx;
          color: rgba($color: #ffffff, $alpha: 0.5);
          text-align: left;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;
        .item {
          flex: 1;
          min-width: 0;
          .value {
            font-family: DIN, sans-serif;
            font-weight: bold;
            font-size: 32rpx;
            color: #ffeacc;
          }
          .label {
            margin-top: 10rpx;
            font-family: PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 22rpx;
            color: rgba($color: #ffffff, $alpha: 0.5);
          }
        }
      }
    }
  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    overflow: hidden;
    .item {
      flex: 1;
      min-width: 0;
      padding: 30rpx;
      background: transparent;
      text-align: center;
      .img {
        width: 72rpx;
        height: auto;
      }
      .label {
        margin-top: 16rpx;
        width: 100%;
        font-weight: bold;
        font-size: 24rpx;
        color: #333333;
        text-align: center;
      }
    }
  }

  .list1 {
    width: 100%;
    background: transparent;
    overflow: hidden;
    .item {
      float: left;
      position: relative;
      margin-bottom: 30rpx;
      width: 100%;
      padding: 30rpx;
      background: #ffffff;
      border-radius: 20rpx;
      .header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;

        .avatar {
          width: 98rpx;
          height: 98rpx;
        }
        .info {
          flex: 1;
          min-width: 0;
          padding-left: 20rpx;
          text-align: left;
          line-height: 1;
          .name {
            font-weight: 800;
            font-size: 28rpx;
            color: #333333;
          }
          .num {
            margin-top: 20rpx;
            font-family: DIN;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
          }
        }
      }
      .dataShow {
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
        width: 100%;
        padding: 30rpx;
        background: #f7f7f7;
        border-radius: 16rpx;
        .data {
          flex: 1;
          min-width: 0;
          text-align: center;
          .value {
            font-family: DIN, sans-serif;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
          }
          .label {
            margin-top: 12rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }
  }
}

.section {
  position: relative;
  margin-bottom: 30rpx;
  width: 100%;
  height: auto;
  padding: 0;
  z-index: 99;
  .section-in {
    width: 100%;
    height: auto;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
  }
  .title {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .title-in {
      position: relative;
      display: inline-block;
      text {
        position: relative;
        font-weight: 800;
        font-size: 28rpx;
        color: #333333;
        z-index: 9;
      }
      .title-sign {
        position: absolute;
        top: -10rpx;
        right: -16rpx;
        width: 32rpx;
        height: auto;
        z-index: 0;
      }
    }
  }
  .detail {
    margin-top: 30rpx;
    width: 100%;
  }
}
</style>
